import React, {Component, useEffect} from 'react';
import {SearchinputStyle} from './SearchInputStyle.js'
import imgIconont from '../../assets/mainIconfont/小米.png'
import imgSearch from '../../assets/mainIconfont/搜索.png'

const SearchInput = (props) => {
  const {handleOnclick, SearchBoxhandleOnclick, display} = props;
  // console.log(display,'/////////////////////////');
  // console.log(handleOnclick(),'---------------------');

  return (
    <SearchinputStyle>
      <div className={display ? "container2 " : "container1"}>
        <div className='iconfont'>
          <img src={imgIconont} alt=""/>
        </div>
        <div className="search-input">
          <p className='search-border'>
            <img alt="" className='search-img' src={imgSearch}/>
          </p>
          <input type="text" placeholder='搜索商品' disabled onFocus={SearchBoxhandleOnclick}/>
        </div>
      </div>
    </SearchinputStyle>
  )
}

export default SearchInput
